﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
        * {
            box-sizing: unset;
        }

        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }

        /*        .logo-list li{
                    padding:8px;
                }
               .logo-list li:hover{
                    background-color: #f3f3f3;
                }*/
        .type-list a:hover {
            color: #1299ec;
        }

        .skus {
            list-style: none;
        }

        .skus li {
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }

        .skus li.selected {
            border: 2px solid #dd1144;
        }

        .skus img {
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

<div id="searchApp">
    <div id="nav-bottom">
        <ly-top/>
    </div>


    <!--list-content-->
    <div class="main">
        <div class="py-container">

            <div class="bread">
                <!--面包屑-->
                <ul class="fl sui-breadcrumb">
                    <li><span>全部结果:</span></li>
                    <li v-for="(c,i) in breads" :key="i">
                        <a href="#" v-if="i<2">{{ c.name }}</a>
                        <span v-else>{{ c.name }}</span>
                    </li>
                </ul>
                <!--已选择过滤项，cid3不要，k === 'brandId'说明是品牌，页面显示品牌，其它规格则直接显示k的值-->
                <ul class="tags-choose">
                    <li class="tag" v-for="(v,k) in search.filter" :key="k" v-if=" k !== 'cid3' ">
                        {{ k === 'brandId' ? '品牌': k }}:<span style="color: red">{{getFilterValue(k,v)}}</span>
                        <span></span>
                        <i class="sui-icon icon-tb-close" @click="removeFilter(k)"></i>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--selector-->
            <div class="clearfix selector">
                <!--虽然页面元素是一样的，但是品牌会比其它搜索条件多出一些样式，因为品牌是以图片展示。需要进行特殊处理。数据展示是一致的，我们采用v-for处理：-->
                <div class="type-wrap" v-for="(f,i) in remainFilters" :key="i" v-if="f.k !='品牌'" v-show=" i<5|| show">
                    <div class="fl key">{{ f.k }}</div>
                    <div class="fl value">
                        <ul class="type-list">
                            <!--给所有的过滤项绑定点击事件-->
                            <li v-for="(option,j) in f.options" :key="j" @click="selectFilter(f.k,option)">
                                <a>{{ option.name }}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext"></div>
                </div>
                <div class="type-wrap logo" v-else>
                    <div class="fl key brand">{{ f.k }}</div>
                    <div class="value logos">
                        <ul class="logo-list">
                            <li v-for="(option,j) in f.options" v-if="option.image" @click="selectFilter(f.k,option)">
                                <img :src="option.image"/></li>
                            <li style="text-align: center" v-else @click="selectFilter(f.k,option)">
                                <a style="line-height: 30px; font-size: 12px" href="#">{{option.name}}</a>
                            </li>
                            <li style="text-align: center"><a style="line-height: 30px; font-size: 12px" href="#">黑马</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext">
                        <a href="javascript:void(0);" class="sui-btn">多选</a>
                    </div>
                </div>

                <div class="type-wrap" style="text-align: center">
                    <v-btn small flat @click="show=true" v-show="!show">
                        更多
                        <v-icon>arrow_drop_down</v-icon>
                    </v-btn>
                    <v-btn small="" flat @click="show=false" v-show="show">
                        收起
                        <v-icon>arrow_drop_up</v-icon>
                    </v-btn>
                </div>
            </div>
            <!--details-->
            <div class="details">
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <ul class="sui-nav">
                            <!--综合查询默认不排序sortBy为空, 把active搞成true-->
                            <li :class="{active:!search.sortBy}" @click="search.sortBy =''">
                                <a href="#">综合</a>
                            </li>
                            <li>
                                <a href="#">销量</a>
                            </li>
                            <!--给search.sorBy传createTime代表以createTime过滤, 并且默认排序搞成true-->
                            <li @click="search.sortBy='createTime';search.descending=true "
                                :class="{active:search.sortBy==='createTime'}">
                                <a href="#">新品</a>
                            </li>
                            <li>
                                <a href="#">评价</a>
                            </li>
                            <!--给search.sorBy传price代表以价格排序,价格的话还需要分正序倒序,所以search.descending = !search.descending-->
                            <li @click="search.sortBy='price';search.descending = !search.descending"
                                :class="{active:search.sortBy === 'price'}">
                                <a href="#">价格</a>
                            </li>
                        </ul>
                        <div class="top-pagination">
                            <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
                            <span><i style="color: red;">{{search.page}}</i>/{{ totalPage }}</span>
                            <a class="btn-arrow" href="#" style="display: inline-block">&lt;</a>
                            <a class="btn-arrow" href="#" style="display: inline-block">&gt;</a>
                        </div>
                    </div>
                </div>

                <!--搜索结果显示-->
                <div class="goods-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <!--第一个图片，从自己新增的selected对象里拿-->
                                    <a :href="'item/' + goods.id + '.html'" target="_blank"><img :src="goods.selected.image" height="200"/></a>
                                    <ul class="skus">
                                        <!--鼠标放上大图跟着变，因为大图是根据sku走的,选中样式：如果-->
                                        <li :class="{selected: sku.id == goods.selected.id}" v-for="sku in goods.skus"
                                            :key="sku.id" @mouseOver="goods.selected = sku">
                                            <img :src="sku.image">
                                        </li>
                                    </ul>
                                </div>
                                <div class="clearfix"></div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>{{ ly.formatPrice(goods.selected.price)}}</i>
                                    </strong>
                                </div>
                                <div class="attr">
                                    <em>{{goods.selected.title.length > 20 ? goods.selected.title.substring(0,20) +
                                        "...":goods.selected.title}}</em>
                                </div>
                                <div class="cu">
                                    <em><span>促</span>{{
                                        goods.subTitle.length>15?goods.subTitle.substring(0,15)+"...":goods.subTitle}}</em>
                                </div>
                                <div class="commit">
                                    <i class="command">已有2000人评价</i>
                                </div>
                                <div class="operate">
                                    <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="fr">
                    <div class="sui-pagination pagination-large">
                        <ul>
                            <li :class="{prev:true,disabled:search.page === 1}">
                                <a href="#" @click="prevPage">«上一页</a>
                            </li>
                            <!--如果总页数不足5页，也就是totalPage不足5，我们就不应该遍历5了-->
                            <li :class="{active:index(i) == search.page}" v-for="i in Math.min(5,totalPage)" :key="i">
                                <!--每个页码点击后更改search.page的值-->
                                <a href="#" @click="search.page=index(i)">{{ index(i) }}</a>
                            </li>
                            <li class="dotted"><span>...</span></li>
                            <li :class="{next:true,disabled:search.page === totalPage}">
                                <a href="#" @click="nextPage">下一页»</a>
                            </li>
                        </ul>
                        <div><span>共{{totalPage }}页&nbsp;&nbsp;</span><span>
      到第
      <input type="text" class="page-num" v-model="pageNum">
      页 <button class="page-confirm" @click="goToPage">确定</button></span></div>
                    </div>
                </div>
            </div>


            <!--hotsale-->
            <div class="clearfix hot-sale">
                <h4 class="title">热卖商品</h4>
                <div class="hot-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_01.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_03.png"/>
                                </div>
                                <div class="attr">
                                    <em>金属A面，360°翻转，APP下单省300！</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_04.png"/>
                                </div>
                                <div class="attr">
                                    <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4068.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有20人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_02.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            search: {
                key: "",  //搜索的关键字
                page: 1,   // 请求数据，默认请求第一页
                filter: {} // 发送的过滤项
            },
            goodsList: [], // 定义接收到的数据
            total: 0,       // 总条数
            totalPage: 0,    // 总页码
            pageNum: '',    // 定义的跳转页码
            filters: [],    // 过滤的参数集合数组
            show: false,    // 展开更多过滤条件
            breads: []       // 三级分类商品名称


        },
        created() {
            // location.search：返回当前 URL 的查询部分（问号 ? 之后的部分）。
            if (!location.search) {
                return;
            }
            // 把查询部分去掉?号，转换成对象{key:xxx}
            const search = ly.parse(location.search.substring(1));

            // 处理search.page的数据，如果是第一次访问的时候没有带page参数
            search.page = search.page ? parseInt(search.page) : 1;

            // 默认为空的话不排序
            search.sorBy = search.sorBy || "";
            // 对排序方式初始化，转为布尔值，descending是否排序
            search.descending = search.descending === "true" || false;

            // 在构造函数中会对search进行初始化,得到filter的数据  ，search.filter是一个对象
            search.filter = search.filter || {};
            // 保存到本地
            this.search = search;
            // 发起请求，去后端查数据
            console.log(this.search);
            this.loadData();

        },
        methods: {
            loadData() {

                // 请求后端数据，因为有可能传的数据量大使用post请求
                ly.http.post("/search/page", this.search).then(({data}) => {
                    if (data.items.length === 0) {
                        return
                    }
                    console.log(data)
                    // 封装总页码，和总条数数据
                    this.total = data.total;
                    this.totalPage = data.totalPage;

                    // 处理结果集,把skus转换成对象，给得到的goods再加个selected对象，保存第一个数据
                    data.items.forEach(goods => {
                        goods.skus = JSON.parse(goods.skus);
                        goods.selected = goods.skus[0];
                    });

                    // 先处理数据再赋值
                    this.goodsList = data.items;
                    // 根据cid查询三级分类名称
                    if (data.categories.length === 1) {
                        ly.http.get("/item/category/all/level?id=" + data.categories[0].id).then(
                            resp => this.breads = resp.data
                        )
                    }
                    // 分类过滤项
                    this.filters.push({
                        k: "分类",
                        options: data.categories
                    });

                    // 品牌的过滤项 (根据先后顺序push)
                    this.filters.push({
                        k: "品牌",
                        options: data.brands
                    });

                    // 初始化其他参数
                    data.spec.forEach(s => {
                        s.options = s.options.map(o => ({name: o}));
                        this.filters.push(s)
                    });

                    // console.log(this.goodsList);
                    // console.log(this.total, this.totalPage);
                    // console.log(data.categories);
                    // console.log(data.brands)
                    // console.log(data.spec)
                })
            },
            // 计算页码函数
            index(i) {
                // 如果当前页<=3或者总页码<=5，说明当前最多5页，那么页码生成也就是1,2,3,4,5这样,直接返回i按照当前循环的数即可
                if (this.search.page <= 3 || this.totalPage <= 5) {
                    return i;
                    // 如果当前页>3那说明，举个例子要显示第10页，那么应该10前面2个，10后面2个，10-3+i=8（i从1算起），8 9 10 11 12
                    // 也就是说从当前页-3加上当前的第i个按钮开始显示按钮数值（顺带）
                } else if (this.search.page > 3) {
                    return this.search.page - 3 + i;
                } else {
                    // 剩下最后的条件也就是当前页大于totalPage-2时（到达页尾了）。如totalPage = 12,那么12-5+i = 8 (8 9 10 11 12)
                    // 当然直接return this.search.page的值，是因为我们有watch，监听search，如果变化会跳转刷新
                    return this.search.page - 5 + i;
                }

            },
            // 点击上一页函数
            prevPage() {
                if (this.search.page > 1) {
                    this.search.page--
                }
            },
            // 点击下一页函数
            nextPage() {
                if (this.search.page < this.totalPage)
                    this.search.page++
            },
            goToPage() {
                this.search.page = parseInt(this.pageNum);
            },
            selectFilter(k, o) {
                console.log(k);    // CPU核数
                console.log(o);    // 对象 name:八核
                // 如果直接给search赋值，会触发watch，所以另外新建一个对象
                const obj = {};
                Object.assign(obj, this.search);    // 复制对象给obj
                if (k === '分类' || k === '品牌') {
                    // 如果点的是 分类和品牌的数据的话，o = 分类的ID和品牌的ID
                    o = o.id;
                }
                // 给filter的k属性赋值，id值或者name值
                obj.filter[k] = o.name || o;
                console.log(obj.filter);
                this.search = obj;
            },
            // 返回品牌名称的函数
            getFilterValue(k, v) {
                // 如果没有过滤参数，我们跳过展示
                if (!this.filters || this.filters.length === 0) {
                    return null;
                }
                let filter = null;
                // 判断是否是品牌
                if (k === '品牌') {
                    // 返回品牌名称

                    return this.filters.find(f => f.k === '品牌').options[0].name;
                }
                return v;
            },
            // 删除选中过滤的方法
            removeFilter(k) {
                this.search.filter[k] = null;
            }
        },
        // 计算属性,把filters中的已经被选择的key过滤掉，选择过就不再显示
        computed: {
            remainFilters() {
                const keys = Object.keys(this.search.filter);
                if (this.search.filter.cid3) {
                    keys.push("cid3");
                }
                if (this.search.filter.brandId) {
                    keys.push("brandId");
                }
                //使用filter方法进行过滤
                return this.filters.filter(f => !keys.includes(f.k) && f.options.length > 1);
            }

        },
        // 监听页码（使用深度监听）
        watch: {
            search: {
                deep: true,
                handler(newVal, oldVal) {
                    // 如果不加判断会出现无限循环，因为Vue实例初始化的钩子函数中，我们读取请求参数，赋值给search的时候，也触发了watch监视！
                    // 也就是说，每次页面创建完成，都会触发watch，然后就会去修改window.location路径，然后页面被刷新，再次触发created钩子，又触发watch，周而复始，无限循环。
                    // 所以，我们需要在watch中进行监控，如果发现是第一次初始化，也就是老值为空，则不继续向下执行
                    if (!oldVal || !oldVal.key)
                        return;
                    window.location.href = "http://www.leyou.com/search.html?" + ly.stringify(newVal)
                }
            }
        },
        components: {
            lyTop: () => import("./js/pages/top.js")
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>